<template>
    <div>
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media"  v-for="item in newslist" :key="item.id">
					<router-link :to="'/home/newsinfo/'+item.id">
						<img class="mui-media-object mui-pull-left" :src="item.image_url">
						<div class="mui-media-body">
							<h1>{{ item.title}}</h1> 
							<p class='mui-ellipsis'>
                                <span>发表时间:{{item.add_time| globalDateFormat }}</span>
                                <span>点击:{{item.click}}</span>
                            </p>
						</div>
					</router-link>
				</li>
		</ul>
    </div>
</template>

<script>
import  {Toast} from 'mint-ui';

export default {
    data () {
        return {
            newslist: [] // 新闻列表
        }
    },

    created() {
        this.getNewsList();
    },
    methods : {
         getNewsList() {
             this.$http.get('http://mint-ui.github.io/docs/#/zh-cn2/swipe').then(result => {
                if (result.status === 200) {
                    this.newslist = [
                        {
                            id:2001,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://pic-bucket.nosdn.127.net/photo/0008/2018-10-16/DU8HI4JU5BD20008NOS.jpg',
                            click : 2,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                        {
                            id:2002,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://pic-bucket.nosdn.127.net/photo/0008/2018-10-16/DU8HI4JU5BD20008NOS.jpg',
                            click : 3,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                        {
                            id:2003,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://pic-bucket.nosdn.127.net/photo/0008/2018-10-16/DU8HI4JU5BD20008NOS.jpg',
                            click : 6,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                        {
                            id:2004,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://pic-bucket.nosdn.127.net/photo/0007/2018-02-05/D9T24HNR4EBT0007NOS.jpg',
                            click : 2,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                        {
                            id:2005,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://pic-bucket.nosdn.127.net/photo/0008/2018-10-16/DU8HI4JU5BD20008NOS.jpg',
                            click : 3,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                        {
                            id:2006,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://pic-bucket.nosdn.127.net/photo/0007/2018-02-05/D9T24HNR4EBT0007NOS.jpg',
                            click : 6,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                        {
                            id:2007,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://pic-bucket.nosdn.127.net/photo/0007/2018-02-05/D9T24HNR4EBT0007NOS.jpg',
                            click : 2,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                        {
                            id:2008,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://pic-bucket.nosdn.127.net/photo/0008/2018-10-16/DU8HI4JU5BD20008NOS.jpg',
                            click : 3,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                        {
                            id:2009,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://cms-bucket.nosdn.127.net/2018/09/13/cb9915b2a225445f990ed46a7f55ba3d.jpeg?imageView&thumbnail=300y200',
                            click : 6,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                        {
                            id:2010,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://cms-bucket.nosdn.127.net/2018/09/20/edc7d5cdc4f84239a7cb3b193361aead.jpeg?imageView&thumbnail=300y200',
                            click : 6,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                         {
                            id:2011,
                            title: 'Mate 20系列手机体验：华为终于消灭了产品短板',
                            zhaiyao: '北京时间2018年10月16日，华为终于带来了Mate 20系列的几款新品，对于几款新品，相信大家也是期待已久了，虽然此前网上已经有了很多相关的曝光，但这场发布会还是给我们带来了一些惊喜',
                            image_url : 'http://cms-bucket.nosdn.127.net/2018/09/20/edc7d5cdc4f84239a7cb3b193361aead.jpeg?imageView&thumbnail=300y200',
                            click : 6,
                            add_time : '2018-10-12T10:30:20.000Z'
                        },
                    ]
                }
                else{
                    Toast("加载新闻列表失败！！！");
                }
             })
         },
    }
}

    
</script>


<style lang="scss" scoped>
.mui-media-body{
    h1 {
       font-size: 14px;
    } 

    .mui-ellipsis {
      font-size: 12px;
      color: #226aff;
      display: flex;
      justify-content: space-between;
    }
}
</style>
